<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/article.css">
    <!--    <link rel="stylesheet" href="css/1.css">-->
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>

        $(function () {

            // 轮播图
            var $banner = $('#banner');
            var $slide = $('li.slide');
            var $page = $("li.page");
            var $prev = $(".prev");
            var $next = $(".next");
            var index = 0;
            // 定时 轮播图
            var Show = setInterval(timeShow, 2300);

            // setTimeout   (timeShow,3);
            function timeShow() {
                index++;
                if (index >= $slide.length) index = 0;
                for (var i = 0; i <= $slide.length; i++) {
                    $slide.eq(i).css({"z-index": 1, "opacity": 0})
                }
                $slide.eq(index).css({"z-index": 2, "opacity": 1});
                $page.eq(index).addClass("active").siblings().removeClass("active")
                // console.log(index)
            }

            // 按钮点击
            $prev.click(function (event) {
                index--;
                // console.log(index)  // 从0开始计数，
                if (index <= -1) index = $slide.length - 1;
                $slide.eq(index).css({"z-index": 2, "opacity": 1}).siblings().not(".fader_controls").css({
                    "z-index": 0,
                    "opacity": 0
                });
                $page.eq(index).addClass("active").siblings().removeClass("active")
                console.log('$prev', index)
                event.stopPropagation();

            });
            $next.click(function (event) {
                index++;
                if (index >= $slide.length) index = 0;
                // $page.eq(index).addClass("active").siblings().removeClass("active")
                // console.log('---',index)
                $slide.eq(index).css({"z-index": 2, "opacity": 1}).siblings().not(".fader_controls").css({
                    "z-index": 0,
                    "opacity": 0
                });
                // $slide.eq(index).prevAll()
                $page.eq(index).addClass("active").siblings().removeClass("active")
                // console.log('$next',index)
                event.stopPropagation();
            });

            // 鼠标进入事件，子元素也触发
            $banner.mouseover(function () {
                // console.log(Show);
                clearInterval(Show);

            });
            //鼠标离开事件
            $banner.mouseout(function () {
                Show = setInterval(timeShow, 2300);
                // console.log('离开',Show)
            })

            $(".news-list li").mouseover(function (event) {
                // console.log($(".news-list li").index(this))  // 获取索引值
                // var index = $(".news-list li").index(this)
                $(this).addClass("sty-li").siblings().removeClass("sty-li")
            });

            $(".news-list").mouseout(function () {
                // console.log($(this))
                $(this).children().eq(0).addClass("sty-li").siblings().removeClass("sty-li")

            })

        });

    </script>



</head>
<body>

<!--上部分-->
<header id="header">

    <div class="navbox">
        <h2 id="mnavh"><span class="navicon"></span></h2>
        <!--        logo-->
        <div class="logo">
            <a href="/">
                Master博客
            </a></div>

        <nav>
            <!--    导航栏-->
            <ul id="starlist">
                <li><a href="/" id="selected">首页</a></li>
                <li class="menu"><a href="#">后端</a>
                    <ul class="sub">
                        <li><a href="#">Python</a></li>
                        <li><a href="#">Golang</a></li>
                        <li><a href="#">Node.js</a></li>
                    </ul>
                    <span></span></li>
                <li class="menu"><a href="#">web前端</a>
                    <ul class="sub">
                        <li><a href="#">css</a></li>
                        <li><a href="#">js</a></li>
                        <li><a href="#">Vue</a></li>
                        <li><a href="#">React</a></li>
                    </ul>
                    <span></span></li>
                <li class="menu"><a href="#">生活随记</a>
                    <ul class="sub">
                        <li><a href="#">我的日记</a></li>
                        <li><a href="#">程序人生</a></li>
                    </ul>
                    <span></span></li>
                <li><a href="#">碎言碎语</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">时间轴</a></li>
                <li><a href="#">留言板</a>
                </li>
            </ul>
        </nav>


    </div>

</header>

<div class="searchbox">
</div>

<article>
    <!--// 中间部分    -->

    <!--    article右边部分-->
    <div class="lbox">

        <!--    // 上部分---------------->
        <div class="banbox">
            <div class="banner">
                <div id="banner" class="fader">

                    <li class="slide"><a href="#" target="_blank"><img src="images/show1.jpg"></a></li>

                    <li class="slide"><a href="#" target="_blank"><img src="images/show3.jpg"></a></li>

                    <li class="slide"><a href="#" target="_blank"><img src="images/show2.jpg"></a></li>

                    <li class="slide"><a href="#" target="_blank"><img src="images/show1.jpg"></a></li>
                    <div class="fader_controls">
                        <div class="page prev" data-target="prev"></div>
                        <div class="page next" data-target="next"></div>
                        <ul class="pager_list">
                            <li class="page active" data-target="1">1</li>
                            <li class="page" data-target="2">2</li>
                            <li class="page" data-target="3">3</li>
                            <li class="page" data-target="4">4</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--    上右部分-->
        <div class="headline">
            <ul>
                <li><a href="#"><img src="images/h1.jpg">
                    <span>为什么说10月24日是程序员的节日？为什么说10月24日是程序员的节日为什么说10月24日是程序员的节日为什么说10月24日是程序员的节日</span></a></li>
                <li><a href="#"><img src="images/h2.jpg"><span>个人网站做好了，百度不收录怎么办？来，看看他们怎么做的。</span></a></li>
            </ul>
        </div>

        <!--  /// 中将部分------------->
        <div class="tab-box whitebg clearfix">
            <div class="tab-buttons">
                <ul>
                    <li class="newscurrent"><a href="#">个人博客</a></li>
                    <li><a href="#">Web端</a></li>
                    <li><a href="#">Python</a></li>
                    <li><a href="#">Golang</a></li>
                    <li><a href="#">最新推荐</a></li>
                </ul>
            </div>

            <div class="news-tab">
                <div class="news-item">
                    <ul class="news-list">
                        <li class="sty-li"><i></i><a href="#" title="">安静地做一个爱设计的女子</a>
                            <p>自从入了这行，很多人跟我说可以做网络教程，我也有考虑，但最终没有实现，因为我觉得在这个教程泛滥的时代，直接做一套免费的原创个人博客模板更为实在。每当看到自己喜欢的配色图片</p>
                        </li>
                        <li><i></i><a href="#" title="">电话以外的宁静</a>
                            <p>
                                电话很久没有响过了，我的QQ也很久没有在线了，消失了很多天，刚刚结识的朋友因为我身上又起了红疹，每天都发来消息询问我的情况，我做到了这么多天来的沉默，我相信，没有网络，我还是可以继续我自己的生活</p>
                        </li>
                        <li><i></i><a href="#" title="">遇见一个未知的你</a>
                            <p>听着那熟悉的歌曲看着那一张张可爱的图片.-读着我们共同欣赏的诗……也许我们曾经相遇,看着你远去的背影 ,沿着你来的方向 ,回忆时间穿梭于幸福的点点滴滴....</p></li>
                        <li><i></i><a href="#" title="">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的...</a>
                            <p>不管你是学前端的还是后端的，作为一个程序员，做一个自己的博客，那是必然的。咱们的圈子就这么大，想让更多的人了解你，看看你的技术多牛逼，扔一个博客地址就行了</p></li>
                        <li><i></i><a href="#" title="">个人博客，属于我的小世界！</a>
                            <p>
                                个人博客，用来做什么？我刚开始就把它当做一个我吐槽心情的地方，也就相当于一个网络记事本，写上一些关于自己生活工作中的小情小事，也会放上一些照片，音乐。每天工作回家后就能访问自己的网站，一边听着音乐，一边写写文章。</p>
                        </li>

                    </ul>
                </div>

            </div>
        </div>

        <div class="ad whitebg">
            <a href="#" target="_blank">
                <img src="images/壁纸1.jpg"></a>
        </div>
        <!--        &#45;&#45;&#45;&#45;&#45;&#45;下部，文章排序&#45;&#45;&#45;&#45;-->
        <div class="whitebg bloglist">
            <h2 class="htitle">
                最新博文
            </h2>
            <ul>
                <li>
                    <h3 class="blog-title">
                        <b>【顶】</b>
                        <a href="#">2020，如何选择自己的路</a>
                    </h3>
                    <span class="blog-pic img-scale">
                        <i><a href="#">个人博客</a></i>
                        <a href="#"><img src="images/h1.jpg"></a>
                    </span>
                    <p class="blog-text">
                        不管你是学前端的还是后端的，作为一个程序员
                        不管你是学前端的还是后端的，作为一个程序员
                        不管你是学前端的还是后端的，作为一个程序员，
                        做一个自己的博客，那是必然的。咱们的圈子就这么大，想让更多的人了解你，看看你的技术多牛逼，扔一个博客地址就行了
                    </p>

                    <p class="blog-info">
                        <i class="avatar">
                            <a href="#" target="_blank"><img src="images/tou.jpg" border="0" width="30" height="30"
                                                             alt=""></a></i>
                        <span>2018-11-08</span>
                        <span>【<a href="#" target="_blank">个人博客</a>】</span>
                        <a href="#" class="view-more">阅读详细</a>
                    </p>
                </li>

                <li>
                    <h3 class="blog-title">
                        <a href="#">2020，如何选择自己的路</a>
                    </h3>
                    <span class="blog-pic img-scale">
                        <i><a href="#">个人博客</a></i>
                        <a href="#"><img src="images/h1.jpg"></a>
                    </span>
                    <p class="blog-text">
                        不管你是学前端的还是后端的，作为一个程序员
                        不管你是学前端的还是后端的，作为一个程序员
                        不管你是学前端的还是后端的，作为一个程序员，
                        做一个自己的博客，那是必然的。咱们的圈子就这么大，想让更多的人了解你，看看你的技术多牛逼，扔一个博客地址就行了
                    </p>

                    <p class="blog-info">
                        <i class="avatar">
                            <a href="#" target="_blank"><img src="images/tou.jpg" border="0" width="30" height="30"
                                                             alt=""></a></i>
                        <span>2018-11-08</span>
                        <span>【<a href="#" target="_blank">个人博客</a>】</span>
                        <a href="#" class="view-more">阅读详细</a>
                    </p>
                </li>
            </ul>

        </div>

    </div>


    <!--   article 左边部分-->
    <div class="rbox">


    </div>

</article>

</body>
</html>
